纹理贴图是Threejs一个很重要的内容，游戏、产品720展示、物联网3D可视化等项目程序员加载模型的同时同时需要处理纹理贴图。

通过纹理贴图加载器TextureLoader的load()方法加载一张图片可以返回一个纹理对象Texture，纹理对象Texture可以作为模型材质颜色贴图.map属性的值。

材质的颜色贴图属性.map设置后，模型会从纹理贴图上采集像素值，这时候一般来说不需要在设置材质颜色.color。.map贴图之所以称之为颜色贴图就是因为网格模型会获得颜色贴图的颜色值RGB。 例子： 使用平铺的方式，将草地图片贴到PlaneGeometry上，图片如下：

代码：

效果：

此时纹理贴图是静止状态，如果想要一个运动的纹理贴图，可以设置texture.offset位置

效果：

在使用贴图的过程中，贴图上可以使用不同的材质

通过Three.js类CanvasTexture可以分别实现把Canvas画布作为纹理贴图使用。

Canvas画布作为Three.js纹理贴图(CanvasTexture) Canvas画布可以通过2D API绘制各种各样的几何形状，可以通过Canvas绘制一个轮廓后然后作为Three.js网格模型、精灵模型等模型对象的纹理贴图。

核心代码：

使用canvas当作贴图的图片，首先先创建好canvas的内容，不需要将canvas加入dom树中

效果：

通过Three.js类VideoTexture可以分别实现把视频作为纹理贴图使用。

视频本质上就是一帧帧图片流构成，把视频作为Threejs模型的纹理贴图使用，就是从视频中提取一帧一帧的图片作为模型的纹理贴图，然后不停的更新的纹理贴图就可以产生视频播放的效果。

使用视频当作贴图的图片，首先先创建好video的内容，不需要将video加入dom树中 代码：

核心代码：

效果：（因上传图片大小限制，删减了gif图的帧数，造成下图显示效果卡顿）

一个复杂的曲面模型，往往模型顶点数量比较多，模型文件比较大，为了降低模型文件大小，法线贴图.normalMap算法自然就产生了，复杂的三维模型3D美术可以通过减面操作把精模简化为简模，然后把精模表面的复杂几何信息映射到法线贴图.normalMap上 在之前的一篇文章中，其实就已经使用贴图制作了一个旋转的地球模型了，具体可参考：Three.js杂记（九）—— 练习：地球

之前的地球上并没有什么山脉突起，只是一个平面图。而现在，可以使用发现贴图，来造成山脉的效果 法线贴图：

代码：

效果：